<template>
  <!-- 子页面——同环环比 -->
  <view class="conter">
    <cc-dateB title='同环环比' text='选择时间' color='#fff' frist="日" second="月" third="季" fourth="年" @confirm="confirm_a"></cc-dateB>
     <view class="navigation_head"></view>
    <view class="header">
      <view class="header_b" :class="{header_a:choice==1}">
        日均
      </view>
      <view class="header_b" :class="{header_a:choice==2}">
        月均
      </view>
      <view class="header_b" :class="{header_a:choice==5}">
        季均
      </view>
      <view class="header_b" :class="{header_a:choice==3}">
        年均
      </view>
    </view>
    <view class="head">
      <view class="head_word">
       <ms-dropdown-menu>
          <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
        </ms-dropdown-menu>
      </view> 
    </view>
    <!-- 第一个 -->
    <view class="frist_card">
      <view class="card_word">
        <view class="card_left">
          徽州区
        </view>
        <view class="card_right">
          {{nowtime}}
        </view>
      </view>
      <view class="card_rectangle">
        <view class="card_rectangle_a">
          <view class="rectangle_a box_color_b">
            {{num?num:0}}{{unit?unit:'mg/m³'}}
          </view>
          <view class="rectangle_b box_color_b">
            厂界TOVC
          </view>
        </view>
        <view class="card_rectangle_a">
          <view class="rectangle_a box_color_b">
            {{num_a?num_a:0}}{{unit_a?unit_a:'mg/m³'}}
          </view>
          <view class="rectangle_b box_color_b">
            排口TOVC
          </view>
        </view>
      </view>
    </view>
    <!-- 第二个 -->
    <view class="frist_card">
      <view class="card_word">
        <view class="card_left">
         同比
        </view>
        <view class="card_right">
          {{TBtime}}
        </view>
      </view>
      <view class="card_rectangle">
        <view class="card_rectangle_aa" v-if="tbRate>0">
          <view class="rectangle_a box_color_a">
           {{tbRate}}%({{tbValue}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_a">
            <image src="../../static/working_condition/shang.png" mode=""></image>
            厂界TOVC
          </view>
        </view>  
        <view class="card_rectangle_a" v-if="tbRate==0">
          <view class="rectangle_a box_color_b">
           {{tbRate}}%({{tbValue}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_bb box_color_b">
            <image src="../../static/working_condition/yuan.png" mode=""></image>
            厂界TOVC
          </view>
        </view>
        <view class="card_rectangle_ab" v-if="tbRate<0">
          <view class="rectangle_a box_color_c">
           {{tbRate}}%({{tbValue}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_c">
            <image src="../../static/working_condition/xia.png" mode=""></image>
            厂界TOVC
          </view>
        </view>
        
        <view class="card_rectangle_aa" v-if="tbRate>0">
          <view class="rectangle_a box_color_a">
            {{tbRate_a}}%({{tbValue_a}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_a">
            <image src="../../static/working_condition/shang.png" mode=""></image>
            排口TOVC
          </view>
        </view>
        <view class="card_rectangle_a" v-if="tbRate==0">
          <view class="rectangle_a box_color_b">
            {{tbRate_a}}%({{tbValue_a}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_bb box_color_b">
            <image src="../../static/working_condition/yuan.png" mode=""></image>
            排口TOVC
          </view>
        </view>
        <view class="card_rectangle_ab" v-if="tbRate<0">
          <view class="rectangle_a box_color_c">
            {{tbRate_a}}%({{tbValue_a}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_c">
            <image src="../../static/working_condition/xia.png" mode=""></image>
            排口TOVC
          </view>
        </view>
        
      </view>
    </view>
    <!-- 第三个 -->
    <view class="frist_card">
      <view class="card_word">
        <view class="card_left">
          环比
        </view>
        <view class="card_right">
          {{HBtime}}
        </view>
      </view>
      <view class="card_rectangle">
        <view class="card_rectangle_aa" v-if="hbRate>0">
          <view class="rectangle_a box_color_a">
           {{hbRate}}%({{hbValue}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_a">
             <image src="../../static/working_condition/shang.png" mode=""></image>
           厂界TOVC
          </view>
        </view>
        <view class="card_rectangle_a" v-if="hbRate==0">
          <view class="rectangle_a box_color_b">
           {{hbRate}}%({{hbValue}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_bb box_color_b">
            <image src="../../static/working_condition/yuan.png" mode=""></image>
           厂界TOVC
          </view>
        </view>
        <view class="card_rectangle_ab" v-if="hbRate<0">
          <view class="rectangle_a box_color_c">
           {{hbRate}}%({{hbValue}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_c">
             <image src="../../static/working_condition/xia.png" mode=""></image>
           厂界TOVC
          </view>
        </view>
        <view class="card_rectangle_aa" v-if="hbRate>0">
          <view class="rectangle_a box_color_a">
          {{hbRate}}%({{hbValue_a}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_a">
             <image src="../../static/working_condition/shang.png" mode=""></image>
           排口TOVC
          </view>
        </view>
        <view class="card_rectangle_a" v-if="hbRate==0">
          <view class="rectangle_a box_color_b">
           {{hbRate}}%({{hbValue_a}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_bb box_color_b">
            <image src="../../static/working_condition/yuan.png" mode=""></image>
           排口TOVC
          </view>
        </view>
        <view class="card_rectangle_ab" v-if="hbRate<0">
          <view class="rectangle_a box_color_c">
           {{hbRate}}%({{hbValue_a}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b box_color_c">
             <image src="../../static/working_condition/xia.png" mode=""></image>
           排口TOVC
          </view>
        </view>
        <!-- <view class="card_rectangle_a">
          <view class="rectangle_a">
            {{hbRate}}%({{hbValue_a}}{{unit?unit:'mg/m³'}})
          </view>
          <view class="rectangle_b">
            排口TOVC
          </view>
        </view> -->
      </view>
     <!-- <view class="red_word">
        <view class="red_word1">
          <view class="word_a word_style1">
            23m/s
          </view>
          <view class="word_a word_style2">
            排口流速
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            23℃
          </view>
          <view class="word_a word_style2">
            温度
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            12%
          </view>
          <view class="word_a word_style2">
            湿度
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            6m/s
          </view>
          <view class="word_a word_style2">
            风速
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            东南
          </view>
          <view class="word_a word_style2">
            风向
          </view>
        </view>
        <view class="red_word1">
          <view class="word_a word_style1">
            100kpa
          </view>
          <view class="word_a word_style2">
            气压
          </view>
        </view>
      </view> -->
    </view>
    <!-- 图表 -->
    <view class="box">
      <view class="box_a">
        分析图表
      </view>
      <view class="region">
          <echarts :option="option" style="height: 600rpx;" @click="echartsClick"></echarts>
      </view>
    </view>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        value:0,
        nowtime:'', 
        TBtime:'',
        HBtime:'', 
        num:0,
        unit:'mg/m³', 
        num_a:0,
        unit_a:'mg/m³',
        hbRate:0,
        hbRate_a:0,
        hbValue:0,
        hbValue_a:0,
        tbRate:0,
        tbRate_a:0,
        tbValue:0,
        tbValue_a:0,
        All_enterpriseList:[],
        Chain_comparisonList:'',
        enterprise_id:'',
        date:'',
        choice:1,
        option:{
          tooltip: {},
          xAxis: {
            data: ['环比', '同比'],
            name: '',
            axisLine: {
              onZero: true
            },
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          yAxis: {},
          grid: {
            // bottom: 100
          },
          series: [{
              name: '厂界',
              type: 'bar',
              stack: 'one',
              data: []
            },
            {
              name: '排口',
              type: 'bar',
              stack: 'two',
              data: []
            }
          ]
        },
      };
    },
    onLoad() {
      this.getAll_enterprise()
    },
    methods:{
      // 查询企业的总数和企业检测详情
      getAll_enterprise(){
      	this.$http.get('/device/group/customerId',{}).then(res=>{
          // console.log('res', res)
          if(res.code=='00000'){
            const list = []
            res.data.forEach((item,index)=>{
              list.push(
               { 
                text:item.abbreviation,
                id:item.id,
                value:index+1
                }
              )
            })
            list.unshift(
            {
             text:'选择企业',
             value:0
             }
            )
            // console.log('list', list)
            this.All_enterpriseList = list
          }
      	})
      },  
      // 获取同比环比数据
      getChain_comparison(){
        this.$http.get('/envirnment-air/app/analysis/tvocEnterpriseCompare',{
          date:this.date,
          dateType:this.choice,
          enterpriseId:this.enterprise_id
        }).then(res=>{
          console.log('res',res.data);
          let listHB = []
          let listTB = []
          listHB.push(res.data.boundary[0].hbValue) 
          listTB.push(res.data.outlet[0].hbValue)
          listHB.push(res.data.boundary[0].tbValue) 
          listTB.push(res.data.outlet[0].tbValue)
          // console.log('1243523',listHB,listTB)
          this.option.series[0].data=listHB 
          this.option.series[1].data=listTB
          // 时间
          this.nowtime = res.data.boundary[0].time
          this.TBtime = res.data.boundary[0].tbTime
          this.HBtime = res.data.boundary[0].hbTime
          // 徽州区浓度值
          this.num = res.data.boundary[0].vlaue
          this.unit = res.data.boundary[0].unit 
          this.num_a = res.data.outlet[0].vlaue
          this.unit_a = res.data.outlet[0].unit
          // 厂界环比
          this.hbRate = res.data.boundary[0].hbRate
          // 厂界环比浓度值
          this.hbValue = res.data.boundary[0].hbValue  
          // 厂界同比
          this.tbRate = res.data.boundary[0].tbRate
          // 厂界同比浓度值
          this.tbValue = res.data.boundary[0].tbValue 
          // 排口环比
          this.hbRate_a = res.data.outlet[0].hbRate
          // 排口环比浓度值
          this.hbValue_a = res.data.outlet[0].hbValue
          // 排口同比
          this.tbRate_a = res.data.outlet[0].tbRate
          // 排口同比浓度值
          this.tbValue_a = res.data.outlet[0].tbValue 
         
        })
      },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.date = e.date
        this.choice = e.choice
        // console.log('fjowefjie',e)
      },
      mileage(e) {
        this.enterprise_id = e.id
        this.getChain_comparison()
        // console.log('enterprise_id',this.enterprise_id);
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
    }
  }
</script>

<style lang="scss">
  .navigation_head{
    height: calc(88rpx + var(--status-bar-height));
  }
  .uni-datetime-picker-timebox[data-v-6e13d7e2] {
    border: none !important;
  }
  .conter {
    height: 2622rpx;
    background: #F7F7F7;
    overflow: hidden;
  }

  .header {
    display: flex;
    width: 702rpx;
    height: 66rpx;
    margin: 25rpx 0 0 24rpx;
  }
  .head {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    overflow: hidden;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
  .header_a {
    width: 175rpx;
    height: 66rpx;
   font-size: 24rpx;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #FFFFFF !important;
    line-height: 66rpx;
    text-align: center;
    background: #4EA1FF !important;
    border-radius: 8rpx;
  }

  .header_b {
    width: 175rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    background-color: #fff;
    text-align: center;
    border-right: 1rpx solid #EAEAEA;
  }
  .frist_card{
    width: 702rpx;
    margin: 20rpx auto 0;
    border-radius: 8rpx;
    background-color: #FFFFFF;
  }
  .card_word {
    height: 100rpx;
    border-bottom: 1rpx solid #F2F2F2;
  }

  .card_left {
    float: left;
    margin: 31rpx 0 0 20rpx;
  }

  .card_right {
    float: right;
    margin: 31rpx 20rpx 0 0;
  }

  .card_rectangle {
    width: 100%;
    height: 180rpx;
    display: flex;
    justify-content: space-around;
    margin: 41rpx 0 20rpx;
  }

  .card_rectangle_a {
    width: 310rpx;
    height: 156rpx;
    background: rgba(78, 161, 255, 0.05);
    border-radius: 8px;
    border: 1px solid #4EA1FF;
    overflow: hidden;
  }
  .card_rectangle_aa {
    width: 310rpx;
    height: 156rpx;
   background: rgba(255, 128, 108, 0.05);
   border-radius: 8px;
   border: 1px solid #FF806C;
   overflow: hidden;
  }
  .card_rectangle_ab {
    width: 310rpx;
    height: 156rpx;
  background: rgba(90, 216, 166, 0.05);
  border-radius: 8px;
  border: 1px solid #5AD8A6;
  overflow: hidden;
  }
  .box_color_a{
    color: #FF806C;
  }
  .box_color_b{
    color: #4EA1FF;
  }
  .box_color_c{
    color: #5AD8A6;
  }
  .rectangle_a {
    margin-top: 33rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    // color: #475368;
  }

  .rectangle_b {
    margin-top: 10rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    // color: #475368;
    image{
      margin-right: 10rpx;
      width: 17rpx;
      height: 22rpx;
    }
  }
  .rectangle_bb {
    margin-top: 10rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    // color: #475368;
    image{
      margin-right: 10rpx;
      width: 14rpx;
      height: 14rpx;
    }
  }

  .red_word {
    display: flex;
    justify-content: space-around;
    margin:41rpx 0 20rpx 0;
  }

  .word_style1 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin-bottom: 11rpx;
  }

  .word_style2 {
    font-size: 22rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    text-align: center;
  }
  .box{
    width: 702rpx;
    height: 660rpx;
    margin: 20rpx auto;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .box_a {
    margin: 30rpx 0 0 24rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .region{
    width: 100%;
  }
  .scroll{
    width: 100%;
    transform: translate(-35%,-1%);
  }
  
</style>
